<template>
  <div class="gift">
    <van-nav-bar
        title="积分礼品"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="points">
      我的积分: <span class="my-points">500</span> <van-icon name="question-o" />
    </div>
    <div class="item" v-for="(item,index) in giftList" :v-key="item.id">
      <img :src="item.url" alt="">
      <p class="name">{{item.name}}</p>
      <div class="exchange">
        <p class="price">{{item.price}}积分</p>
        <van-button type="primary">立即兑换</van-button>
      </div>
      <van-divider />
    </div>
  </div>
</template>

<script>
export default {
  name: "Gift",
  data(){
    return{
      giftList:[
        {
          id: 1,
          name:"迷你紫砂壶手工创意小号袖珍指尖壶",
          url: "https://cbu01.alicdn.com/img/ibank/2019/025/809/12311908520_191203383.jpg",
          price: 100
        },
        {
          id: 2,
          name: "紫砂茶宠老虎摆件生肖拉毛泥绘小老虎茶玩茶具",
          url: "https://cbu01.alicdn.com/img/ibank/O1CN0137WrH22M6prDaJNj9_!!2350959779-0-cib.jpg",
          price: 500
        },
        {
          id: 3,
          name: "紫砂大肚弥勒佛 彩陶茶宠茶玩汽车摆件摆设迷你可爱佛教布袋和尚",
          url: "https://cbu01.alicdn.com/img/ibank/2018/363/541/8773145363_1510508360.jpg",
          price: 1000
        }
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/mall',
        query: {
          tab: 2
        }
      });
    },
  }
}
</script>

<style scoped lang="less">
.gift{
  padding-top: 60px;
  .points{
    padding: 10px;
    .my-points{
      color: #F40;
      font-size: 1.2rem;
    }
  }
  .item{
    .name{
      padding: 5px 0;
    }
    .price{
      color: #F40;
      font-size: 1.5rem;
    }
  }
}

.exchange{
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
